<template>
    <div class="search-wrapper">
        <slot></slot>
        <template v-for="item in showQueryForm">
            <Button
                v-if="item.id == 'refresh' && item.type == 'Button'"
                @click="clickBtn(item.id, item.fun)"
                key="refresh"
                class="icon-btn"
                ><Icon :size="16" type="ios-refresh"
            /></Button>
            <Button
                v-if="item.id !== 'refresh' && item.type == 'Button'"
                :icon="item.icon"
                @click="clickBtn(item.id, item.fun)"
                :key="item.id"
                >{{ getTxt(item) }}</Button
            >
            <Input
                :key="item.id"
                v-if="item.type == 'Input'"
                v-model="query[item.id]"
                :placeholder="getPlaceholder(item,'请输入')"
                :props="item.props"
                clearable
                @on-change="debounceSearch"
                :style="item.width ? `width:${item.width}px` : `width:180px`"
            />
            <Select filterable
                :key="item.id"
                v-if="item.type == 'Select'"
                v-model="query[item.id]"
                clearable
                filterable
                :style="item.width ? `width:${item.width}px` : `width:160px`"
                :placeholder="getPlaceholder(item,'请选择')"
                @on-change="debounceSearch"
            >
                <Option
                    v-for="Select in getOptionsData(item)"
                    :value="Select.id"
                    :key="Select.id"
                    >{{ Select.label }}</Option
                >
            </Select>
            <Checkbox
                :key="item.id"
                v-if="item.type == 'Checkbox'"
                v-model="query[item.id]"
                @on-change="debounceSearch"
                >{{ item.text }}</Checkbox
            >
            <FormDatepicker 
                search
                :key="item.id"
                v-if="item.type == 'FormDatepicker'"
                v-model="query[item.id]"
                @on-change="debounceSearch"></FormDatepicker>
        </template>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { debounce } from '@/libs/utils'
import FormDatepicker from '@/components/common/form-datepicker'
export default {
    name: 'form-item',
    components:{ FormDatepicker },
    props: {
        queryForm: {
            type: Array,
            default:() => []
        },
        freshList: {
            type: Function,
        },
        updateQuery: {
            type: Function,
        }
    },
    data() {
        return {
            query:{}
        };
    },
    computed: {
        showQueryForm() {
            return this.queryForm.filter((item) => this.getShow(item));
        },
    },
    watch:{
        showQueryForm(){
            this.init();
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init(){
            let query = this.queryForm.filter(item => item.type !== 'Button');
            this._query = {};
            query.forEach(item => {
                if(item.type === 'Checkbox'){
                    this._query[item.id] = false;
                    this.$set(this.query,item.id,item.value || false)
                }else if(item.type === 'FormDatepicker'){
                    this._query[item.id] = [];
                    this.$set(this.query,item.id,item.value || [])
                }else{
                    this._query[item.id] = '';
                    this.$set(this.query,item.id,item.value || '')
                }
            })
            this.updateQuery && this.updateQuery(this.query);
        },
        clickBtn(name, cb) {
            if (name == 'refresh') {
                this.query = {...this._query};
                this.freshList(this.query);
                return
            }
            cb && cb();
        },
        debounceSearch: debounce(function () {
            this.freshList(this.query);
        }, 500),
        getShow(item) {
            return typeof item.show === 'function'
                ? item.show()
                : item.show !== false
                ? true
                : false;
        },
        getTxt(item){
            return typeof item.text === 'function' ? item.text() : item.text
        },
        getOptionsData(item) {
            return typeof item.optionData === 'function'
                ? item.optionData()
                : item.optionData
                ? item.optionData
                : [];
        },
        getPlaceholder(item,pre){
            return item.placeholder || `${pre}${item.title}`
        }
    },
};
</script>

<style scoped>
    .search-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        justify-content: flex-end;
        align-items: center;
    }
    .pt-content-top .search-wrapper {
        margin-bottom: 0;
    }
    .search-wrapper > * {
        margin-bottom: 2px;
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
    .search-wrapper > *:first-child{
        margin-left: 0 !important;
    }
    .search-wrapper > *:last-child{
        margin-right: 0 !important;
    }
    .search-wrapper > .ivu-select {
        width: 150px !important;
    }
    .search-wrapper > .ivu-input-wrapper {
        width: 180px !important;
    }
</style>
